<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>여행정보등록</title>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript">
	try {
		document.execCommand('BackgroundImageCache', false, true);
	} catch (e) {
	}
</script>
<script type="text/javascript"
	src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=6097c245d3e876968092fbae0a547925"></script>
<script>
	$(function() {
		$("#tabs").tabs(); //탭생성
		$("#tabs").css({
			"width" : "600px",
			"font-size" : "10pt",
			"float" : "left"
		});//탭 환경설정
	});
</script>
<script type="text/javascript">
function viewImg(obj){
	$("#picture").empty();
	$("#picture").append("<img src='"+obj+"' width='598' height='398'>");
}

function addPic(){
	
}

function UpPicture(){

	//XHR이 아니라 frame쓰므로 인코딩 신경 안써두 됨
	$.ajaxFileUpload({
			url:'/Yogiro/tourinfo.do',					//호출 CGI(서블릿/JSP) URL
			secureuri:false,			 					//보안 프로토콜 사용여부
			fileElementId:{"fileInputId":['pic','pic1','pic2','pic3','pic4']}, 			//input type file의 ID
			dataType: 'json',				   				//return data type
			data:{"method":"pictureUp"},	//전송할 폼 data//JSON형태여야 한다. serialize() 안됨
			success: function (data, status){//처리 결과 성공시 호출할 callback 함수
				$("#picture").empty();
				$("#pictureList").empty();
				$("#picture").append("<img src='img/"+data.fileName[0]+"' width='598' height='398'>");	
				$(data.fileName).each(function(i){
					if(data.fileName[i]==null){
					$("#pictureList").append("<td><img alt='이미지없음' width='115' height='79'></td>");
					}else if(data.fileName[i]!=null){
					$("#pictureList").append("<td><img src='img/"+data.fileName[i]+"' width='115' height='79' id='"+data.fileName[i]+"'onclick='viewImg(this.src)' style='cursor:pointer;'></td>");
					}
				});
				//$("#picture").append("<img src='img/"+data.fileName+"' width='598' height='398'>");
				//사진파일이있을때 히든값으로 전송
				if(data.fileName[0]!=null){
					$("#fileName").val(data.fileName[0]);
				}
				if(data.fileName[0]!=null){
					$("#fileName1").val(data.fileName[1]);
				}
				if(data.fileName[0]!=null){
					$("#fileName2").val(data.fileName[2]);
				}
				if(data.fileName[0]!=null){
					$("#fileName3").val(data.fileName[3]);
				}
				if(data.fileName[0]!=null){
					$("#fileName4").val(data.fileName[4]);
				}
			},
			error: function (data, status, e){//처리 결과 오류시 호출할 callback 함수
				alert(e);
			}
		}
	);
	return false;
}
	</script>
</head>
<body>
	<h2>여행지 등록정보</h2>
	<div>
		<form name="picForm" id="picForm" method="post" action="/Yogiro/tourinfo.do"
			enctype="multipart/form-data">
			<input type="hidden" name="method" value="pictureUp">
			<div>
				<table width="600" height="400" border="1">
					<tr height="360" align="center">
						<td id="picture" colspan="5">
						<img alt='사진을 선택하세요' width='598' height='399' align="middle">
						</td>
					</tr>
					<tr id=pictureList>
					</tr>
					<tr>
						<td id="file" align="right" colspan="4">
						<input type="file" name="upPicture[0]" id="pic" class="input" size="50">
						<input type="file" name="upPicture[1]" id="pic1" class="input" size="50">
						<input type="file" name="upPicture[2]" id="pic2" class="input" size="50">
						<input type="file" name="upPicture[3]" id="pic3" class="input" size="50">
						<input type="file" name="upPicture[4]" id="pic4" class="input" size="50">
						</td>
						<td id=addPicture align="right" width="115">
						<input type='button' onclick='return UpPicture();' value='사진등록'>
						<input type='button' value='사진추가' onclick='addPic()'>  
						</td>
					</tr>
				</table>
				
			</div>
		</form>
	</div>
	<div>
	<form action="/Yogiro/tourinfo.do" method="post">
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">기본정보</a></li>
			<li><a href="#tabs-2">지도</a></li>
		</ul>
		
		<div id="tabs-1">
			<input type="hidden" name="method" value="insertTourInfo">
				<table>
				<tr>
				<td>
					<input type="text" name="tourTitle" style="width: 525px">
				<td>
				</tr>
				<tr>
				<td>
				<textarea rows="15" style="width: 525px" name="tourContent"></textarea>
				</td>
				</tr>
			</table>
			<input type="hidden" name="fileName" id="fileName">
			<input type="hidden" name="fileName1" id="fileName1">
			<input type="hidden" name="fileName2" id="fileName2">
			<input type="hidden" name="fileName3" id="fileName3">
			<input type="hidden" name="fileName4" id="fileName4">
		</div>
		<div id="tabs-2">
				<script type="text/javascript" src="/Yogiro/js/map.js"></script><!-- NAVER MAP -> map.js저장 -->
				<p>
					
			
			<p>
		</div>
	<div>
	<table>
	<tr>
	<td id="lgt" width="450px" align="center" style="margin-left: 5px;"></td><td width="250px" align="center"><input type="submit" value="등록"></td>
	</tr>
	</table>
	</div>
	</div>
	</form>
	</div>
</body>
</html>